<!doctype html>

<html lang=en>

<link href=/icon.svg     rel=icon>
<link href=/icon-16.png  rel=icon sizes=16x16>
<link href=/icon-32.png  rel=icon sizes=32x32>
<link href=/icon-180.png rel=apple-touch-icon>

<link href=/feeds/atom rel=alternate type=application/atom+xml>
<link href=/feeds/rss  rel=alternate type=application/rss+xml>
<link href=/feeds/json rel=alternate type=application/json>

<title>{{ .Title }}</title>

<!-- FIXME theme-color won't change for dark themes -->
<meta name=description  content="{{ .Description }}">
<meta name=theme-color  content=#343A40>
<meta name=twitter:card content=summary>
<meta name=viewport     content="width=device-width">

<meta property=og:description  content="{{ .Description }}">
<meta property=og:image        content="{{ with .GolferInfo -}}
    {{ avatar .AvatarURL 200 }}
{{- else -}}
    https://code.golf/icon-180.png
{{- end }}">
<meta property=og:image:width  content=200>
<meta property=og:image:height content=200>
<meta property=og:title        content="{{ .Title }}">
<meta property=og:url          content="https://code.golf{{ with .Path }}{{ . }}{{ end }}">

<script id=langs type=application/json>{{ .Langs }}</script>
<script id=holes type=application/json>{{ .Holes }}</script>

{{ range .CSS -}}
    <link rel=stylesheet href="{{ .Path }}" {{- with .Media }} media="{{ . }}" {{- end }}>
{{ end }}

{{ if or (eq .Name "hole-tabs") (eq .Name "wiki") }}
    <script nonce="{{ $.Nonce }}">
        MathJax = {
            chtml:   { fontURL:    '/mathjax-fonts' },
            startup: { elements:   ['article'] },
            tex:     { inlineMath: [['$', '$']] },
            options: {
                processHtmlClass: 'language-math',
                skipHtmlTags: {'[-]': ['pre']},
            },
        };
    </script>
{{ end }}

{{ range .JS -}}
    <script nonce="{{ $.Nonce }}" src="{{ . }}" type=module></script>
{{ end }}

<!-- Convert server-side theme into a client-side media query -->
<script id=dark-mode-media-query type=application/json>
{{- if eq .Theme "dark" -}}
    "all"
{{- else if eq .Theme "light" -}}
    "not all"
{{- else -}}
    "(prefers-color-scheme: dark)"
{{- end -}}
</script>

<dialog id=search-nav-dialog>
    <form id=search-nav-form >
        <div>
            <input placeholder="Search holes, #langs, @golfers..." id=search-nav-input autocomplete=off />
            <ul id=search-nav-results></ul>
        </div>
        <div class=hint>Ctrl+P again to print, arrows/tab to navigate results, enter to confirm</div>
    </form>
</dialog>

<header id=site-header>
    <nav>
        <a {{ if eq .Path "/" }} class=on {{ end }}
            href=/ title=Home>
            {{ svg "logo" }}
        </a>
        <a {{ if eq .Path "/about" }} class=on {{ end }}
            href=/about title=About>
            {{ svg "question-circle" }}
        </a>
        <a {{ if eq .Path "/ideas" }} class=on {{ end }}
            href=/ideas title=Ideas>
            {{ svg "lightbulb-light" }}
        </a>
        <a {{ if hasPrefix .Path "/recent/" }} class=on {{ end }}
            href=/recent/solutions/all/all/bytes title=Recent>
            {{ svg "clock" }}
        </a>
        <a {{ if hasPrefix .Path "/rankings/" }} class=on {{ end }}
            href=/rankings/holes/all/all/bytes title=Rankings>
            {{ svg "trophy" }}
        </a>
        <a {{ if hasPrefix .Path "/stats" }} class=on {{ end }}
            href=/stats title=Statistics>
            {{ svg "graph-up" }}
        </a>
        <a {{ if hasPrefix .Path "/wiki" }} class=on {{ end }}
            href=/wiki title=Wiki>
            {{ svg "journals" }}
        </a>
        <div></div>
    {{ with .Golfer }}
        {{ $slug := (print "/golfers/" .Name) }}

        <a {{ if or (eq $.Path $slug) (hasPrefix $.Path "/golfer/")
            (hasPrefix $.Path (print $slug "/")) }} class=on {{ end }}
            href="{{ $slug }}" title=Profile>
            {{ svg "bytes" }}{{ comma .BytesPoints }}
            <img src="{{ avatar .AvatarURL 56 }}">
            {{ svg "chars" }}{{ comma .CharsPoints }}
        </a>
    {{ else }}
        <a class=log-in href="{{ .LogInURL }}" title="Log In">
            {{ svg "sign-in-alt-light" }}
        </a>
    {{ end }}
    </nav>
</header>

{{ range .Banners }}
    {{ if and $.Golfer (index $.Golfer.Settings "hide-banner" .HideKey) }}
        {{ continue }}
    {{ end }}

    <div class="{{ .Type }}">
    {{ if eq .Type "alert" }}
        {{ svg "exclamation" }}
    {{ else if eq .Type "info" }}
        {{ svg "info-circle" }}
    {{ end }}
        <p>{{ .Body }}

    {{ if and $.Golfer .HideKey }}
        <form action=/golfer/hide-banner method=post>
            <input name=banner type=hidden value="{{ .HideKey }}">
            <input name=path type=hidden value="{{ $.Path }}">
            <button title="Hide banner">{{ svg "x" }}</button>
        </form>
    {{ end }}
    </div>
{{ end }}
